<template>
	<div class="login-container">
		<div class="login-left">
			<div class="header">
				<img class="logo-img" src="/logo.png" alt="logo" />
				{{ title }}
			</div>
			<ServerLogin class="login-left_svg" style="color: var(--el-color-primary)" />
		</div>
		<div class="login-right">
			<el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
				<div class="title-container">
					<h3 class="title">{{ title }}</h3>
					<lang-select class="set-language" />
				</div>
				
				<!-- 登录开始 -->
				<div class="login-box" v-if="loginBox">
					<el-form-item prop="username">
						<el-input
							ref="username"
							v-model="loginForm.username"
							class="login-input"
							:placeholder="$t('login.username')"
							name="username"
							type="text"
							tabindex="1"
							auto-complete="on"
						>
							<template #prefix>
								<span class="svg-container">
									<svg-icon icon-class="user" />
								</span>
							</template>
						</el-input>
					</el-form-item>
					<el-form-item prop="password">
						<el-input
							ref="passwordRef"
							v-model="loginForm.password"
							class="login-input"
							type="password"
							:placeholder="$t('login.password')"
							name="password"
							tabindex="2"
							auto-complete="on"
							:show-password="true"
							@keyup.enter="handleLogin"
						>
							<template #prefix>
								<span class="svg-container">
									<svg-icon icon-class="password" />
								</span>
							</template>
						</el-input>
					</el-form-item>
				</div>
				<!-- 登录的结束 -->
				<!-- 注册框 -->
				<div class="register-box" v-else>
					<!-- 注册的用户名 -->
					<el-form-item prop="email">
						<el-input
							ref="email"
							v-model="registerForm.email"
							class="login-input"
							placeholder="请输入注册邮箱"
							name="email"
							type="text"
							tabindex="1"
							auto-complete="on">
							<template #prefix>
								<span class="svg-container">
									<svg-icon icon-class="user" />
								</span>
							</template>
						</el-input>
					</el-form-item>
					<!-- 注册的密码 -->
					<el-form-item prop="password">
						<el-input
							ref="password"
							v-model="registerForm.password"
							class="login-input"
							placeholder="请输入注册密码"
							name="password"
							type="password"
							tabindex="1"
							auto-complete="on">
							<template #prefix>
								<span class="svg-container">
									<!-- 密码icon -->
									<svg-icon icon-class="password" />
								</span>
							</template>
						</el-input>
					</el-form-item>
					<!-- 获取验证码框 validationCode-->
					<el-form-item prop="validationCode">
						<el-input
							ref="validationCode"
							v-model="registerForm.validationCode"
							class="login-input"
							placeholder="请输入验证码"
							name="validationCode"
							type="text"
							tabindex="1"
							auto-complete="on">
							<template #prefix>
								<span class="svg-container">
									<!-- 验证码图标 -->
									<svg-icon icon-class="password" />
								</span>
							</template>
							<template #append>
								<!-- 修改按钮颜色为绿色 -->
								<el-button type="success" @click="handleGetValidationCode">
									{{ validationCodeText  }}
								</el-button>
							</template>
						</el-input>
					</el-form-item>
				</div>

				<!-- 登录按钮 -->
				<el-button size="default" v-if="loginBox" :loading="loading" type="primary" style="width: 100%; margin-bottom: 30px" @click.prevent="handleLogin">
					登录
				</el-button>
				<!-- 注册按钮 -->
				<el-button size="default" v-if="loginBox"  :loading="loading" type="primary" style="width: 100%; margin-bottom: 30px;margin-left: 0px;" @click.prevent="handleRegister">
					去注册
				</el-button>
				<el-button size="default" v-if="!loginBox"  :loading="loading" type="primary" style="width: 100%; margin-bottom: 30px;" @click.prevent="handleRegister">
					注册
				</el-button>
				<el-button size="default" v-if="!loginBox"  :loading="loading" type="primary" style="width: 100%; margin-bottom: 30px;margin-left: 0px;" @click.prevent="handleLogin">
					去登录
				</el-button>

				

			</el-form>
		</div>
	</div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, toRefs, watch, nextTick } from 'vue'
import ServerLogin from './components/LoginMainSvg.vue'
// 组件依赖
import { ElMessage } from 'element-plus'
import LangSelect from '@/layout/components/Header/components/Language.vue'
// // 谷歌验证
// import GoogleVerifyDialog from './components/GoogleVerifyDialog.vue'
const title = import.meta.env.VITE_APP_TITLE
// 状态管理依赖
import useStore from '@/store'
// API依赖
// import { getGeetConfig } from '@/api/login'
import { useRoute } from 'vue-router'

const { user } = useStore()
const route = useRoute()
const loginFormRef = ref(/*ElForm*/)
const passwordRef = ref(/*ElInput*/)
const captchaStatus = ref('ready') // ready loading complete

//ref = data
//创建一个loginBox: true的变量
const loginBox = ref(true)

//registerForm
const registerForm = reactive({
	email: "", //邮箱
	password: "", //密码
	validationCode: "" //验证码
})

const state = reactive({
	loginForm: {
		username: 'admin',
		password: '123456'
	},
	loginRules: {
		username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
		password: [{ required: true, message: '密码不能为空', trigger: 'blur' }]
	},
	loading: false,
	// passwordType: 'password',
	otherQuery: {},
	clientHeight: document.documentElement.clientHeight
})
let captcha_obj: any = null

const { /*dialogOpts,*/ loginForm, loginRules, loading /*, passwordType*/ } = toRefs(state)

//validationCode
const validationCodeText = ref("获取验证码")
//时间倒计时 60秒
const countDown = ref(60)
//获取验证码
function handleGetValidationCode(){
	/**
	 * 先用countDown判断是否是60秒
	 * 如果是60秒，开始倒计时
	 * 如果不是60秒，则提示用户请稍等
	 * 如果为0则提示用户请重新获取验证码
	 */
	if(countDown.value === 60){
		//倒计时
		const timer = setInterval(() => {
			countDown.value--
			validationCodeText.value = countDown.value + "秒后重新获取"
			if(countDown.value === 0){
				clearInterval(timer)
				validationCodeText.value = "获取验证码"
				countDown.value = 60
			}
		}, 1000)
	}else{
		//elementui弹框提示用户请稍后再获取验证码
		ElMessage({
			message: "请稍后再获取验证码",
			type: "warning",
			duration: 2000
		})
	}
}



// 注册按钮点击
function handleRegister(){
	//如果loginBox 是true(登录框)，就换成false，如果本身就是false 就继续执行
	if(loginBox.value){
		loginBox.value = false
		//阻断代码运行
		return;
	}
	//注册逻辑
	
}

//登录按钮点击
function handleLogin() {
	//如果显示的不是登录框就变成登录框
	if (!loading.value){
		loginBox.value = true;
		return
	}


	loginFormRef.value.validate((valid: boolean) => {
		if (valid) {
			state.loading = true
			user
				.login({
					...state.loginForm
				})
				.then((formData: any) => {
					//user.googleLogin()
				})
				.catch(() => {
				})
				.finally(() => {
					state.loading = false
				})
		}
	})
}

watch(
	route,
	() => {
		const query = route.query
		user.$patch({
			loginQuery: query
		})
	},
	{
		immediate: true
	}
)

onMounted(() => {
	// 极验证初始化
	/*getGeetConfig().then(data => {
		// 极验证加载中
		captchaStatus.value = 'loading'
    // eslint-disable-next-line
		// @ts-ignore
		const initGeetest: any = window.initGeetest
		initGeetest(
			{
				...data,
				product: 'float', // 产品形式，包括：float，popup
				width: '100%' // 该配置已失效
			},
			(captchaObj: any) => {
				captchaObj.appendTo('#captcha')
				captchaObj.onReady(() => {
					// 极验证加载完成
					captchaStatus.value = 'complete'
				})
				captcha_obj = captchaObj
			}
		)
	})*/
})
</script>

<style lang="scss" scoped>
@import '@/styles/mixins.scss';
//$light_gray: var(--el-input-icon-color);
//$light_gray: #fff;
$light_gray: var(--el-color-white);
.login-container {
	min-height: 100%;
	width: 100%;
	display: flex;
	height: 100%;
	overflow: hidden;
	.login-left {
		flex: 1;
		display: flex;
		flex-direction: column;
		background: var(--el-color-primary-light-5);
		.header {
			margin-top: 80px;
			display: flex;
			align-items: center;
			height: 78px;
			padding: 0 20px;
			color: #fff;
			font-size: 22px;
			@include hover-bg-opacity(0, #f00, 0.5);
			&::before {
				//background-color: var(--el-color-primary) !important;
				background: linear-gradient(270deg, var(--el-color-primary-light-5), var(--el-color-primary-light-7));
			}
			.logo-img {
				width: 50px;
				margin-right: 10px;
			}
		}
		.login-left_svg {
			margin: 10% auto;
			max-height: 500px;
		}
	}
	.login-right {
		width: 660px;
		max-width: 100%;
		background: linear-gradient(145deg, var(--el-color-primary-light-5), var(--el-color-white));
	}
	.login-form {
		position: relative;
		width: 360px;
		max-width: 100%;
		padding: 12px 24px;
		margin: 0 auto;
		overflow: hidden;
		top: 30%;
		//left: 50%;
		//transform: translate(-50%, -50%);
		:deep(.el-form-item) {
			border: 1px solid rgba(255, 255, 255, 0.1);
			background: rgba(0, 0, 0, 0.1);
			border-radius: 5px;
			color: #454545;
			.el-input {
				height: 47px;
				.el-input__wrapper {
					padding: 0;
					background: transparent;
					box-shadow: none;
					.el-input__inner {
						background: transparent;
						border: 0;
						-webkit-appearance: none;
						border-radius: 0;
						padding: 12px 8px;
						//padding: 12px 0;
						//padding-right: 8px;
						color: $light_gray;
						height: 47px;
						caret-color: $light_gray;
						&:-webkit-autofill {
							box-shadow: 0 0 0px 1000px var(--el-color-primary-light-5) inset !important;
							-webkit-text-fill-color: $light_gray !important;
						}
					}
					.el-input__prefix-inner > :last-child {
						margin-right: 0;
					}
					/*.el-input__suffix-inner > :first-child {
						margin-left: 0;
					}*/
				}
			}
			.el-input__inner {
				&:hover {
					border-color: var(--el-input-hover-border, var(--el-border-color-hover));
					box-shadow: none;
				}

				box-shadow: none;
			}
		}
		.login-input {
			//--el-input-icon-color: #fff;
			--el-input-placeholder-color: #fafafa;
			:deep(.el-input__suffix) {
				padding-right: 10px;
			}
		}
	}

	.tips {
		font-size: 14px;
		color: #fff;
		margin-bottom: 10px;

		span {
			&:first-of-type {
				margin-right: 16px;
			}
		}
	}

	.svg-container {
		padding-left: 10px;
		color: $light_gray;
		display: inline-block;
	}

	.title-container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 36px;
		.title {
			font-size: 24px;
			color: $light_gray;
			text-align: center;
			font-weight: bold;
		}
		.set-language {
			color: $light_gray;
			font-size: 18px;
			cursor: pointer;
		}
	}

	/*.captcha {
		width: 100%;
		&_placeholder {
			height: 42px;
			width: 100%;
			text-align: center;
			border-radius: 2px;
			background-color: #f3f3f3;
			color: #bbbbbb;
			font-size: 14px;
			letter-spacing: 0.1px;
			line-height: 42px;
		}
		&_wait {
			height: 42px;
			width: 100%;
			text-align: center;
			border-radius: 2px;
			background-color: #f3f3f3;
		}
	}*/

	.loading {
		margin: auto;
		width: 70px;
		height: 20px;
		&-dot {
			&:nth-child(1) {
				animation-delay: 0s;
			}
			&:nth-child(2) {
				animation-delay: 0.1s;
			}

			&:nth-child(3) {
				animation-delay: 0.2s;
			}

			&:nth-child(4) {
				animation-delay: 0.3s;
			}
			float: left;
			width: 8px;
			height: 8px;
			margin: 18px 4px;
			background: #ccc;
			border-radius: 50%;
			opacity: 0;
			box-shadow: 0 0 2px black;
			animation: loadingFade 1s infinite;
		}
	}

	@keyframes loadingFade {
		0% {
			opacity: 0;
		}
		50% {
			opacity: 0.8;
		}
		100% {
			opacity: 0;
		}
	}
}
@media screen and (max-width: 1200px) and (min-width: 576px) {
	.login-container .login-left .login-left_svg {
		position: absolute;
		top: 76% !important;
		left: 0 !important;
		height: 24% !important;
		margin: 0;
	}

	.login-container .login-right {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		padding-top: 20px;
		background: linear-gradient(145deg, var(--el-color-primary-light-5), var(--el-color-primary-light-7));
	}
}

@media screen and (max-width: 576px) {
	.login-container .login-left {
		display: none;
		/*.header {
			display: none;
		}*/
	}
	/*.login-container .login-left .login-left_svg {
		position: absolute;
		top: 82% !important;
		left: 0 !important;
		height: 18% !important;
		margin: 0;
	}*/
	.login-container .title-container .title {
		font-size: 20px;
	}
}
</style>
